<template>
  <div>
    <div class="search-container">
      <el-form :inline="true" ref="form" :model="searchData" size="small">
        <el-form-item label="地区">
          <area-select v-model="searchData.regionCode" :level="1" :emitPath="true" @labelChange="labelChange" ></area-select>
        </el-form-item>
        <el-form-item label="放映状态">
          <el-select v-model="searchData.siteLevel" clearable>
            <el-option
              v-for="siteLevel in levelList"
              :key="siteLevel.value"
              :label="siteLevel.label"
              :value="siteLevel.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点名称">
          <el-input v-model="searchData.siteName" placeholder="请输入站点名称"></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSearch" size="small">查询</el-button>
        <el-button @click="onReset" size="small">重置</el-button>
      </el-form>
    </div>
    <div class="table-container">
      <el-table class="el-table-modify" :data="tableData" border>
        <el-table-column prop="siteName" align="center" label="站点名称">
          <template slot-scope="scope">
            <span :title="scope.row.siteName.length > 5 ? scope.row.siteName : ''">{{scope.row.siteName.length > 5 ? scope.row.siteName.substr(0, 5) + '...' :  scope.row.siteName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="siteCid" align="center" label="站点ID"></el-table-column>
        <el-table-column prop="siteLevel" align="center" label="站点等级">
          <template slot-scope="scope">
            <span>{{SITE_LEVEL[scope.row.siteLevel]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="playId" align="center" label="站点场次ID"></el-table-column>
        <el-table-column prop="hallName" align="center" label="影厅编号"></el-table-column>
        <el-table-column prop="marketPrice" label="原价"></el-table-column>
        <el-table-column prop="lowestPrice" align="center" label="影票结算价"></el-table-column>
        <el-table-column prop="handleFee" align="center" label="服务费"></el-table-column>
        <el-table-column prop="price" align="center" label="普通售价"></el-table-column>
        <el-table-column prop="privilegePrice" align="center" label="权益售价"></el-table-column>
        <el-table-column align="center" label="操作" width="200">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="showEdit(scope.row)">修改</el-button>
						</template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size.sync="pageOption.pageSize"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span
          class="pagination-title"
        >共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
      </el-pagination>
    </div>
    <price-dialog ref="priceDialog"  @priceChange="requestData"></price-dialog>
  </div>
</template>

<script>
import { moviePlayPriceList } from "@/api/viewing";
import {SITE_LEVEL} from '@/utils/const';
import AreaSelect from '@/components/AreaSelect';
import PriceDialog from './PriceDialog';

export default {
  props: ['movieId', 'brandId'],
  components: {AreaSelect, PriceDialog},
  data() {
    return {
      SITE_LEVEL: {...SITE_LEVEL},
      levelList: Object.keys(SITE_LEVEL).map(key => {
        return {
          value: key,
          label: SITE_LEVEL[key],
        }
      }),
      searchData: {
        movieId: this.movieId,
        brandId: this.brandId,
        regionCode: '',
        regionName: '',
        siteLevel: '',
        siteName: ''
      },
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      },
      edit: false,
    };
  },
  watch: {
    brandId(value) {
      this.searchData.brandId = value;
      this.requestData()
    }
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.searchData.regionCode = "";
      this.searchData.regionName = "";
      this.searchData.siteLevel = "";
      this.searchData.siteName = "";
      this.requestData();
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption;
      const postData = {};
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          postData[key] = this.searchData[key];
        }
      });

      if (!postData.movieId || !postData.brandId) {
        return;
      }

      const { data, total } = await moviePlayPriceList({
        page: page - 1,
        size,
        ...postData
      });
      this.tableData = data || [];
      this.pageOption.total = total || 0;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    },
    showEdit(row) {
     this.$refs.priceDialog.show(row);
    },
    labelChange(label) {
      this.searchData.regionName = label;
    }
  },
  created() {
    this.requestData();
  }
};
</script>

<style>
</style>